#{extends 'simpleTemplate.html'/}
<title>&{'Chat_header'}</title>
<script>
    $(function () {
        $("#contact-control").show();
        $("#chat-username").text("${current.name}");
    });
    var toServSocket = new WebSocket("@@{chat.ChatWS.clientToServ(channel.id)}");
    var fromServSocket = new WebSocket("@@{chat.ChatWS.servToClient(channel.id)}");

</script>

<script src="@{'/public/js/chatws.js'}" type="text/javascript"></script>
<script>
    $(function () {
        $.get("@{chat.ChatController.fetchMessages(channel.id, models.chat.messages.TimePeriod.DAY)}",
                {},
                function (data, textStatus, jqXHR) {
                    $(data).each(function (index, message) {
                        addMessage(message);
                    });
                },
                "json"
        );
        $("#chat").addClass("active");
        $("#send_button").bind("click", function (event) {
            sendMessage();
        });
        $("#send_button,#message_text").bind("keypress", function (event) {
            if (event.which == 13) {
                sendMessage();
            }
        });

    });
</script>
<div class="content">
    <div class="content-header">
        <h2>&{'Chat'} ${channel.name}</h2>
    </div>
    <div class="content-body">
        <h3>&{'Chat_you_have_entered_global_as'} ${current.name}</h3>

        <div class="well" id="chat-msg-area">

        </div>
        <!--input part-->
        <div class="chat-input">

            <textarea class="input-block-level" placeholder="&{'Chat_here'}" id="message_text"></textarea>
            <input type="button" value="&{'Chat_send'}" class="btn btn-primary" id="send_button">
        </div>

    </div>
</div>

